/* === Modals === */
$modalBgColor:#e8e8e8;
$modalButonColor: #0894ec;
$modalButonBg: $modalBgColor;
$modalButonActiveBg:#d4d4d4;
$modalDuration:400ms;
$actionsModalDuration:300ms;
$actionsModalButtonBg: rgba(243,243,243,0.95);
$actionsModalActiveButtonBg:#dcdcdc;
$popupDuration: 400ms;
$gray: #8e8e93;
$color-primary: #0894ec;
$color-danger: #f6383a;
$color-warning: #f60;
$color-success: #4cd964;
$color-primary-active: #0a8ddf;
$color-danger-active: darken($color-danger, 10%);
$color-warning-active: darken($color-warning, 10%);
$color-success-active: darken($color-success, 10%);
$color-split: #e7e7e7;
$color-bg: #eee;
$color-text: #3d4145;
$color-text-secondary: #5f646e;
$color-text-gray: #999;
$color-text-gray-light: #ccc;


@import "mixins";
.modal-overlay, .preloader-indicator-overlay, .popup-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  z-index: 10600;
  visibility: hidden;
  opacity: 0;
  transition-duration: $modalDuration;
  &.modal-overlay-visible {
    visibility: visible;
    opacity: 1;
  }
}
.popup-overlay {
  z-index: 10200;
}
.modal {
  width: 13.5rem;
  position: absolute;
  z-index: 11000;
  left: 50%;
  margin-left: -6.75rem;
  margin-top: 0;
  top: 50%;
  text-align: center;
  border-radius: 0.35rem;
  opacity: 0;
  transform: translate3d(0,0,0) scale(1.185);
  transition-property: transform, opacity;
  color: $color-text;
  display: none;
  &.modal-in {
    opacity: 1;
    transition-duration: $modalDuration;
    transform: translate3d(0,0,0) scale(1);
  }
  &.modal-out {
    opacity: 0;
    z-index: 11000-1;
    transition-duration: $modalDuration;
    transform: translate3d(0,0,0) scale(0.815);
  }
}
.modal-inner {
  padding: 0.75rem;
  @include hairline-bottom(#b5b5b5);
  border-radius: 0.35rem 0.35rem 0 0;
  position: relative;
  background: $modalBgColor;
}
.modal-title {
  font-weight: 500;
  font-size: 0.9rem;
  text-align: center;
  +.modal-text {
    margin-top: 0.25rem;
  }
}
.modal-buttons {
  height: 2.2rem;
  overflow: hidden;
  @include flexbox();
  @include justify-content(center);
  &.modal-buttons-vertical {
    display: block;
    height: auto;
  }
}
.modal-button {
  width: 100%;
  padding: 0 0.25rem;
  height: 2.2rem;
  font-size: 0.85rem;
  line-height: 2.2rem;
  text-align: center;
  color: $modalButonColor;
  background: $modalButonBg;
  display: block;
  position: relative;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  @include hairline-right(#b5b5b5);
  -webkit-box-flex:1;
  -ms-flex:1;
  &:first-child {
    border-radius: 0 0 0 0.35rem;
  }
  &:last-child {
    @include hairline-remove-right();
    border-radius: 0 0 0.35rem 0;
  }
  &:first-child:last-child {
    border-radius: 0 0 0.35rem 0.35rem;
  }
  &.modal-button-bold {
    font-weight: 500;
  }
  html:not(.watch-active-state) &:active, &.active-state {
    background: $modalButonActiveBg;
  }
  .modal-buttons-vertical & {
    @include hairline-remove-right();
    @include hairline-remove-top();
    @include hairline-bottom(#b5b5b5);
    border-radius: 0;
    &:last-child {
      border-radius: 0 0 0.35rem 0.35rem;
      @include hairline-remove-bottom();
    }
  }
}
.modal-no-buttons {
  .modal-inner {
    border-radius: 0.35rem;
    @include hairline-remove-bottom();
  }
  .modal-buttons {
    display: none;
  }
}
// Action sheet
.actions-modal {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 11000;
  width: 100%;
  transform: translate3d(0,100%,0);
  &.modal-in {
    transition-duration: $actionsModalDuration;
    transform: translate3d(0,0,0);
  }
  &.modal-out {
    z-index: 11000-1;
    transition-duration: $actionsModalDuration;
    transform: translate3d(0,100%,0);
  }
}
.actions-modal-group {
  margin: 0.4rem;
}
.actions-modal-button, .actions-modal-label {
  width: 100%;
  text-align: center;
  font-weight: normal;
  margin: 0;
  background: $actionsModalButtonBg;
  box-sizing: border-box;
  display: block;
  position: relative;
  @include hairline-bottom(#d2d2d6);
  a {
    text-decoration: none;
    color: inherit;
  }
  b {
    font-weight: 500;
  }
  &.actions-modal-button-bold {
    font-weight: 500;
  }
  &.actions-modal-button-danger {
    color: $color-danger;
  }
  &.color-danger {
    color: $color-danger;
  }
  &.bg-danger {
    background: $color-danger;
    color: white;
    &:active {
      background: $color-danger-active;
    }
  }
  &:first-child {
    border-radius: 0.2rem 0.2rem 0 0;
  }
  &:last-child {
    @include hairline-remove-bottom();
    border-radius: 0 0 0.2rem 0.2rem;
  }
  &:first-child:last-child {
    border-radius: 0.2rem;
  }
  &.disabled {
    opacity: 0.95;
    color:$gray;
  }
}
.actions-modal-button {
  cursor: pointer;
  line-height: 2.15rem;
  font-size:1rem;
  color: $color-primary;
  &:active, &.active-state {
    background: $actionsModalActiveButtonBg;
  }
}
.actions-modal-label {
  font-size: 0.7rem;
  line-height: 1.3;
  min-height: 2.2rem;
  padding: 0.4rem 0.5rem;
  color: $color-text-secondary;
  @include flexbox();
  @include justify-content(center);
  @include align-items(center);
}
// Prompt
input.modal-text-input {
  box-sizing: border-box;
  height: 1.5rem;
  background: #fff;
  margin: 0;
  margin-top: 0.75rem;
  padding: 0 0.25rem;
  border: 1px solid #a0a0a0;
  border-radius: 0.25rem;
  width: 100%;
  font-size: 0.7rem;
  font-family: inherit;
  display: block;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  appearance: none;
  + input.modal-text-input {
    margin-top: 0.25rem;
  }
  &.modal-text-input-double {
    border-radius: 0.25rem 0.25rem 0 0;
    + input.modal-text-input {
      margin-top: 0;
      border-top: 0;
      border-radius: 0 0 0.25rem 0.25rem;
    }
  }
}

// Popup
.popup, .login-screen {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10400;
  background: #fff;
  box-sizing: border-box;
  display: none;
  @include scrollable();
  transition-property: transform;
  transform: translate3d(0,100%,0);
  &.modal-in, &.modal-out {
    transition-duration: $popupDuration;
  }
  &.modal-in {
    transform: translate3d( 0,0,0);
  }
  &.modal-out {
    transform: translate3d( 0,100%,0);
  }
}
.login-screen.modal-in, .login-screen.modal-out {
  display: block;
}

html.with-statusbar-overlay {
  // iPhone with statusbar overlay
  .popup {
    height: -webkit-calc(100% - 1rem);
    height: calc(100% - 1rem);
    top: 1rem;
  }
  .popup-overlay {
    z-index: 9800;
  }
  @media all and (max-width:629px), (max-height:629px) {
    .popup {
      height: -webkit-calc(100% - 1rem);
      height: calc(100% - 1rem);
      top: 1rem;
    }
    .popup-overlay {
      z-index: 9800;
    }
  }
  .login-screen, .popup.tablet-fullscreen {
    height: -webkit-calc(100% - 1rem);
    height: calc(100% - 1rem);
    top: 1rem;
  }
}

//Preloaders modals
.modal .preloader {
  width: 1.7rem;
  height: 1.7rem;
}
.preloader-indicator-overlay {
  visibility: visible;
  opacity: 0;
  background: none;
}
.preloader-indicator-modal {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 0.4rem;
  margin-left: -1.25rem;
  margin-top: -1.25rem;
  background: rgba(0,0,0,0.8);
  z-index: 11000;
  border-radius: 0.25rem;
  .preloader {
    display: block;
    width: 1.7rem;
    height: 1.7rem;
  }
}

// Picker Modal
.picker-modal {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 13rem;
  z-index: 11500;
  display: none;
  transition-property: transform;
  background: #cfd5da;
  transform: translate3d( 0,100%,0);
  &.modal-in, &.modal-out {
    transition-duration: 400ms;
  }
  &.modal-in {
    transform: translate3d(0,0,0);
  }
  &.modal-out {
    transform: translate3d(0,100%,0);
  }
  .picker-modal-inner {
    height: 100%;
    position: relative;
  }
  .toolbar {
    @include hairline-top($color-text-gray);
    position: relative;
    width: 100%;
    + .picker-modal-inner {
      height: -webkit-calc(100% - 2.2rem);
      height: -moz-calc(100% - 2.2rem);
      height: calc(100% - 2.2rem);
    }
  }
  &.picker-modal-inline {
    display: block;
    position: relative;
    background: none;
    z-index: inherit;
    transform: translate3d(0,0,0);
    .toolbar {
      @include hairline-remove-top();
      @include hairline-bottom($color-text-gray);
    }
  }
}

//toast
.toast {
  background: rgba(0, 0, 0, .8);
  border-radius: .1rem;
  color: white;
  padding: 0 .8rem;
  height: 2rem;
  line-height: 2rem;
  font-size: 0.8rem;
  width: auto;
}